<template>
	<view class="body">
		<topback></topback>
		<view class="banner pr">
			<up-swiper :list="data.banner" height="619rpx" :current="data.current" @change="setCur"></up-swiper>
			<view class="current f20">{{ data.current + 1 }}/{{ data.banner.length }}</view>
		</view>
		<view class="bg-white p20">
			<scroll-view scroll-x class="scroll d-s-c">
				<image @click="setCur({ current: index })" :class="data.current == index ? 'active' : ''" class="mr20"
					v-for="(item, index) in data.banner" :key="index" :src="item" mode="aspectFill"></image>
			</scroll-view>
			<view class="name vertical f26">{{ data.detail.title }}</view>
			<view class="sub mt10 f20">{{ data.detail.sub }}</view>
			<view class="tags d-s-c mt20" style="flex-wrap: wrap;">
				<view class="mr20" style="margin-bottom: 14rpx;" v-for="(item, index) in data.detail.filtrate" :key="index">
					<up-tag :text="item" size="mini" bgColor="#EEB663" color="#fff" borderColor="transparent"></up-tag>
					
				</view>
			</view>
			<view class="view d-s-c f18 mt40 row-reverse">
				<block v-if="!data.detail.favorite">
					<view class="item-title" @click="onFavorite">收藏</view>
					<image class="item-icon" style=" width: 40rpx;height: 40rpx;" @click="onFavorite"
						src="https://jiaju.etor.com.cn/assets/addons/shopro/uniapp/goods/collect_0.png"
						mode="aspectFit">
					</image>
				</block>
				<block v-else>
					<view class="item-title" @click="onFavorite">已收藏</view>
					<image class="item-icon" style=" width: 40rpx;height: 40rpx;" @click="onFavorite"
						src="https://jiaju.etor.com.cn/assets/addons/shopro/uniapp/goods/collect_1.gif"
						mode="aspectFit"></image>
				</block>
				<text class="mr30">{{ data.detail.likes }}人收藏</text>
				<text class="mr30">{{ data.detail.views }}人看过</text>

			</view>
		</view>
		<view class="bg-white p20 mt20">
			<view class="f26 pb20 line">商品详情</view>
			<view class="detail mt40">
				<up-parse :content="data.detail.content"></up-parse>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { useStore } from "vuex"
const store = useStore()
const data = reactive({
	// detail: {
	// 	name: "【欧式简奢 】有藏有露收纳 优雅原木设计 系列榻榻米",
	// 	sub: '货号：90PW-A012【库存有限】',
	// 	tags: ['奶油风', '榻榻米', '卧室、书房'],
	// 	fav: 520,
	// 	view: '1.8w',
	// 	txt: "123"
	// },
	detail: {

	},
	banner: [
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	],
	current: 0,
	id: 0
})
async function onFavorite() {
	const res = await store.dispatch('request', {
		url: store.state.api.user.goods_log.favorite,
		data: {
			goods_id: data.detail.id,
		}
	})
	if (res.code == 1) {
		console.log(res.data)
		getDetail()
	}
}
async function getDetail() {
	const res = await store.dispatch('request', {
		url: store.state.api.goods.detail,
		data: {
			id: data.id,
		}
	})
	if (res.code == 1) {
		data.detail = res.data
		data.banner = res.data.images
		uni.$mpShare = {
			title: data.detail.title,
			path: '/pages/detail/detail?id='+data.id,
			imageUrl: data.banner[0],
		};
	}
}
function setCur(e) {
	data.current = e.current
}
onLoad((options) => {
	data.id = options.id
	getDetail()
})
</script>

<style scoped lang="scss">
.current {
	position: absolute;
	right: 20rpx;
	bottom: 20rpx;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 5rpx 20rpx;
	border-radius: 20rpx;
}

.scroll {
	white-space: nowrap;

	.active {
		border: 1px solid red;
	}

	image {
		display: inline-block;
		width: 85rpx;
		height: 75rpx;
		border: 1px solid transparent;
	}
}
</style>